<template>
  <div id="wrap">
    <header>
      <h1>选项式API</h1>
      <nav>
        <p>{{ str }}</p>
        <p>{{ num }}</p>
        <img :src="src" alt="">
        <button @click="click">按钮</button>
        <p>{{ data }}</p>
        <button @click="add">求和</button>
        <p>{{ sum }}</p>
        <p>{{ text }}</p>
        <input type="text" v-model="text">
      </nav>
    </header>
  </div>
</template>
<script lang="ts">
import imgSrc from "@/assets/images/03.jpg"
export default {
  data() {
    const str: string = '你好世界';
    const num: number = 123;
    const src: string = imgSrc;
    let data: number = 123;
    let sum: number = 0;
    let text: string = '';
    return {
      str,
      num,
      src,
      data,
      sum,
      text,
    }
  },
  methods: {
    click: function () {
      this.data++;
    },
    add: function () {
      this.sum = this.data + this.sum;
    }
  }
}
</script>
<style>
#wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 20px;
  font-size: 18px;

  h1 {
    font-size: 50px;
    margin-bottom: 20px;
    color: rgb(243, 231, 233);
  }

  img {
    display: block;
    width: 200px;
    height: 150px;
    margin: 0 auto;
  }
}
</style>
